import {useTranslation} from 'react-i18next';
import {useLayoutEffect, useRef, useState} from 'react';
import Picker from '@see_you/react-native-picker';
import {processColor} from './useDatePicker';
import {useAppTheme} from 'tsun-smart-ui';
import {StatisticsMap} from '@/enums/statistics';

const usePicker = <T extends string>(
  pickerData: {label: string; value: T}[],
) => {
  const theme = useAppTheme();
  const {t} = useTranslation();
  const [selectedValue, setSelectedValue] = useState<T>(pickerData[0].value);
  useLayoutEffect(() => {
    Picker.init({
      pickerCancelBtnColor: processColor(theme.colors?.brand?.primary!),
      pickerConfirmBtnColor: processColor(theme.colors?.brand?.primary!),
      pickerTitleText: '',
      pickerBg: processColor(theme.colors?.neutral?.white!),
      pickerToolBarBg: processColor(theme.colors?.neutral?.white!),
      pickerData: pickerData.map(item => t(item.label)),
      pickerRowHeight: 48,
      pickerFontSize: 15,
      //@ts-ignore
      pickerTextEllipsisLen: 100,
      onPickerConfirm(value) {
        setSelectedValue(
          pickerData.find(item => item.label === value[0])?.value!,
        );
      },
      pickerCancelBtnText: t('user.logOutCancel', {defaultValue: '取消'}),
      pickerConfirmBtnText: t('common.confirmButtonText', {
        defaultValue: '确认',
      }),
      pickerFontColor: processColor(theme.colors?.neutral?.title!),
    });
  }, [pickerData, theme]);
  return [Picker, selectedValue] as const;
};
export const useStatisticsPicker = () => {
  const {t} = useTranslation();
  const options = useRef(
    Object.values(StatisticsMap).map(item => ({label: t(item), value: item})),
  );
  return usePicker(options.current);
};
export default usePicker;
